<template>
  <view class="parking-payment-page">
    <!-- 费用概览 -->
    <view class="fee-overview">
      <view class="overview-header">
        <text class="overview-title">费用概览</text>
        <text class="overview-subtitle">本月停车费用统计</text>
      </view>
      <view class="overview-stats">
        <view class="stat-item">
          <text class="stat-number">{{ feeStats.totalAmount }}</text>
          <text class="stat-label">总费用</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ feeStats.paidAmount }}</text>
          <text class="stat-label">已缴费</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ feeStats.unpaidAmount }}</text>
          <text class="stat-label">待缴费</text>
        </view>
      </view>
    </view>

    <!-- 待缴费列表 -->
    <view class="unpaid-section" v-if="unpaidRecords.length > 0">
      <view class="section-header">
        <text class="section-title">待缴费</text>
        <text class="section-count">({{ unpaidRecords.length }})</text>
      </view>
      
      <view class="payment-list">
        <view 
          class="payment-item" 
          v-for="record in unpaidRecords" 
          :key="record.id"
        >
          <view class="payment-info">
            <view class="plate-number">{{ record.plateNumber }}</view>
            <view class="parking-details">
              <text class="parking-location">{{ record.location }}</text>
              <text class="parking-time">{{ record.entryTime }} - {{ record.exitTime }}</text>
            </view>
            <view class="fee-amount">
              <text class="amount-label">停车费：</text>
              <text class="amount-value">¥{{ record.fee.toFixed(2) }}</text>
            </view>
          </view>
          
          <view class="payment-actions">
            <u-button 
              size="mini" 
              type="primary" 
              @click="handlePay(record)"
            >
              立即缴费
            </u-button>
            <u-button 
              size="mini" 
              type="info" 
              @click="handleViewDetail(record)"
            >
              详情
            </u-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 已缴费记录 -->
    <view class="paid-section" v-if="paidRecords.length > 0">
      <view class="section-header">
        <text class="section-title">已缴费记录</text>
        <text class="section-count">({{ paidRecords.length }})</text>
      </view>
      
      <view class="payment-list">
        <view 
          class="payment-item paid" 
          v-for="record in paidRecords" 
          :key="record.id"
        >
          <view class="payment-info">
            <view class="plate-number">{{ record.plateNumber }}</view>
            <view class="parking-details">
              <text class="parking-location">{{ record.location }}</text>
              <text class="parking-time">{{ record.entryTime }} - {{ record.exitTime }}</text>
            </view>
            <view class="fee-amount">
              <text class="amount-label">停车费：</text>
              <text class="amount-value">¥{{ record.fee.toFixed(2) }}</text>
              <u-tag text="已缴费" type="success" size="mini" />
            </view>
          </view>
          
          <view class="payment-actions">
            <u-button 
              size="mini" 
              type="info" 
              @click="handleViewDetail(record)"
            >
              详情
            </u-button>
            <u-button 
              size="mini" 
              type="warning" 
              @click="handleDownloadInvoice(record)"
            >
              发票
            </u-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="unpaidRecords.length === 0 && paidRecords.length === 0" class="empty-state">
      <u-empty 
        text="暂无停车费用记录"
        mode="car"
      />
    </view>

    <!-- 缴费确认弹窗 -->
    <u-popup v-model="showPaymentPopup" mode="center" :round="10">
      <view class="payment-popup">
        <view class="popup-header">
          <text class="popup-title">确认缴费</text>
        </view>
        
        <view class="popup-content">
          <view class="confirm-info">
            <text class="info-label">车牌号：</text>
            <text class="info-value">{{ selectedRecord?.plateNumber }}</text>
          </view>
          <view class="confirm-info">
            <text class="info-label">停车地点：</text>
            <text class="info-value">{{ selectedRecord?.location }}</text>
          </view>
          <view class="confirm-info">
            <text class="info-label">停车时间：</text>
            <text class="info-value">{{ selectedRecord?.entryTime }} - {{ selectedRecord?.exitTime }}</text>
          </view>
          <view class="confirm-info">
            <text class="info-label">缴费金额：</text>
            <text class="info-value amount">¥{{ selectedRecord?.fee.toFixed(2) }}</text>
          </view>
        </view>
        
        <view class="popup-actions">
          <u-button @click="showPaymentPopup = false">取消</u-button>
          <u-button type="primary" @click="confirmPayment">确认缴费</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 缴费弹窗控制
const showPaymentPopup = ref(false)
const selectedRecord = ref(null)

// 费用统计
const feeStats = ref({
  totalAmount: 0,
  paidAmount: 0,
  unpaidAmount: 0
})

// 停车记录数据
const parkingRecords = ref([
  {
    id: 1,
    plateNumber: '京A12345',
    location: 'A区地下停车场',
    entryTime: '2025-01-21 08:30',
    exitTime: '2025-01-21 18:00',
    fee: 15.00,
    status: 'unpaid',
    statusText: '待缴费'
  },
  {
    id: 2,
    plateNumber: '京A12345',
    location: 'A区地下停车场',
    entryTime: '2025-01-20 09:00',
    exitTime: '2025-01-20 17:30',
    fee: 12.00,
    status: 'paid',
    statusText: '已缴费',
    paymentTime: '2025-01-20 18:30'
  },
  {
    id: 3,
    plateNumber: '京B67890',
    location: 'B区地面停车场',
    entryTime: '2025-01-19 10:00',
    exitTime: '2025-01-19 16:00',
    fee: 9.00,
    status: 'unpaid',
    statusText: '待缴费'
  },
  {
    id: 4,
    plateNumber: '京C11111',
    location: 'C区智能停车场',
    entryTime: '2025-01-18 14:00',
    exitTime: '2025-01-18 22:00',
    fee: 16.00,
    status: 'paid',
    statusText: '已缴费',
    paymentTime: '2025-01-18 22:30'
  }
])

// 计算属性
const unpaidRecords = computed(() => {
  return parkingRecords.value.filter(record => record.status === 'unpaid')
})

const paidRecords = computed(() => {
  return parkingRecords.value.filter(record => record.status === 'paid')
})

// 计算费用统计
const calculateFeeStats = () => {
  const total = parkingRecords.value.reduce((sum, record) => sum + record.fee, 0)
  const paid = paidRecords.value.reduce((sum, record) => sum + record.fee, 0)
  const unpaid = total - paid
  
  feeStats.value = {
    totalAmount: total.toFixed(2),
    paidAmount: paid.toFixed(2),
    unpaidAmount: unpaid.toFixed(2)
  }
}

// 缴费处理
const handlePay = (record) => {
  selectedRecord.value = record
  showPaymentPopup.value = true
}

// 查看详情
const handleViewDetail = (record) => {
  console.log('查看详情:', record)
  // 这里可以跳转到详情页面
}

// 下载发票
const handleDownloadInvoice = (record) => {
  console.log('下载发票:', record)
  uni.showToast({
    title: '发票下载功能开发中',
    icon: 'none'
  })
}

// 确认缴费
const confirmPayment = () => {
  if (!selectedRecord.value) return
  
  // 这里应该调用实际的缴费API
  console.log('确认缴费:', selectedRecord.value)
  
  // 模拟缴费成功
  const index = parkingRecords.value.findIndex(r => r.id === selectedRecord.value.id)
  if (index > -1) {
    parkingRecords.value[index].status = 'paid'
    parkingRecords.value[index].statusText = '已缴费'
    parkingRecords.value[index].paymentTime = new Date().toLocaleString()
  }
  
  // 重新计算费用统计
  calculateFeeStats()
  
  uni.showToast({
    title: '缴费成功',
    icon: 'success'
  })
  
  showPaymentPopup.value = false
  selectedRecord.value = null
}

// 页面加载
onMounted(() => {
  loadParkingRecords()
  calculateFeeStats()
})

// 加载停车记录
const loadParkingRecords = async () => {
  try {
    console.log('加载停车记录')
  } catch (error) {
    console.error('加载停车记录失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.parking-payment-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}

.fee-overview {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  color: #fff;
  
  .overview-header {
    text-align: center;
    margin-bottom: 20px;
    
    .overview-title {
      display: block;
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    .overview-subtitle {
      font-size: 14px;
      opacity: 0.8;
    }
  }
  
  .overview-stats {
    display: flex;
    justify-content: space-around;
    
    .stat-item {
      text-align: center;
      
      .stat-number {
        display: block;
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 12px;
        opacity: 0.8;
      }
    }
  }
}

.unpaid-section,
.paid-section {
  margin-bottom: 20px;
  
  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
    
    .section-count {
      margin-left: 8px;
      font-size: 14px;
      color: #666;
    }
  }
}

.payment-list {
  .payment-item {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    &.paid {
      opacity: 0.8;
    }
    
    .payment-info {
      margin-bottom: 16px;
      
      .plate-number {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
      }
      
      .parking-details {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 8px;
        
        .parking-location,
        .parking-time {
          font-size: 14px;
          color: #666;
        }
      }
      
      .fee-amount {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .amount-label {
          font-size: 14px;
          color: #666;
        }
        
        .amount-value {
          font-size: 16px;
          font-weight: 600;
          color: #ff4757;
        }
      }
    }
    
    .payment-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }
  }
}

.empty-state {
  padding: 60px 0;
  text-align: center;
}

.payment-popup {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 320px;
  
  .popup-header {
    text-align: center;
    margin-bottom: 20px;
    
    .popup-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }
  
  .popup-content {
    margin-bottom: 24px;
    
    .confirm-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      
      .info-label {
        color: #666;
        font-size: 14px;
      }
      
      .info-value {
        color: #333;
        font-size: 14px;
        
        &.amount {
          color: #ff4757;
          font-weight: 600;
        }
      }
    }
  }
  
  .popup-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
}
</style>
